<script setup lang="ts">
import { ref } from 'vue'

const digmanURL = ref('http://codeleilei.gitee.io/miui/digman.html')
</script>

<template>
  <div class="problem overflow-scroll" data-aos="zoom-in">
    <div class="main max-w-[85%] ml-auto mr-auto pt-12">
      <!-- 标题 -->
      <div
        class="character w-64 z-10 text-[#f3f4d9] h-16 flex items-center justify-center m-auto relative"
      >
        <div class="icon w-7 h-7 absolute left-[7%]"></div>
        <p class="text-2xl tracking-[0.25em] pl-10">你想问的问题</p>
      </div>
      <!-- 推荐标签 -->
      <div class="recommend w-[100%] h-36 z-10 relative">
        <div class="label1 flex pt-4 justify-center">
          <div class="label11 w-24 h-6 ml-2 mr-1"></div>
          <div class="label12 w-24 h-6 ml-2 mr-1"></div>
          <div class="label13 w-24 h-6 ml-2 mr-1"></div>
        </div>
        <div class="label2 flex pt-4 justify-center">
          <div class="label21 w-24 h-6 mr-2"></div>
          <div class="label22 w-24 h-6 ml-2"></div>
        </div>
        <div class="label3 flex pt-4 justify-center">
          <div class="label31 w-24 h-6 ml-2 mr-1"></div>
          <div class="label32 w-24 h-6 ml-2 mr-1"></div>
          <div class="label33 w-24 h-6 ml-2 mr-1"></div>
        </div>
      </div>
      <!-- 虚拟人 -->
      <div class="mt-64">
        <iframe
          class="w-full fixed left-0 top-0 h-screen z-0 pointer-events-none"
          :src="digmanURL"
          frameborder="0"
        ></iframe>
      </div>
      <!-- 历史搜索 -->
      <div class="history w-[100%] h-32 rounded-2xl z-10 relative">
        <p class="text-white pl-7 pt-3 text-sm">历史搜索</p>
        <div class="ht-lb1 w-16 h-5 mt-2 ml-6 mr-1 float-left"></div>
        <div class="ht-lb2 w-16 h-5 mt-2 ml-2 mr-1 float-left"></div>
      </div>
      <!-- 发送按钮 -->
      <div class="send w-40 h-9 m-auto mt-4 z-10 relative">
        <p class="text-[#f3f4d9] text-center text-lg tracking-[0.3em] leading-8">发送</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
*::-webkit-scrollbar {
  display: none;
}
.send {
  background: url('../../assets/img/button.png');
}
.ht-lb1 {
  background: url('../../assets/img/map2x.png');
}
.ht-lb2 {
  background: url('../../assets/img/jingqutianqi2x.png');
}
.history {
  background: url('../../assets/img/chat.png');
}
.label11 {
  background: url('../../assets/img/jingqujieshao2x.png');
}
.label12 {
  background: url('../../assets/img/map2x.png');
}
.label13 {
  background: url('../../assets/img/luxiantuijian2x.png');
}
.label21 {
  background: url('../../assets/img/zhihuiwenda2x.png');
}
.label22 {
  background: url('../../assets/img/jingqutianqi2x.png');
}
.label31 {
  background: url('../../assets/img/zhoubianmeishi2x.png');
}
.label32 {
  background: url('../../assets/img/goupiao2x.png');
}
.label33 {
  background: url('../../assets/img/yuyuechaxun2x.png');
}
.icon {
  background: url('../../assets/img/problem_icon.png');
}
.character {
  background: url('../../assets/img/title.png');
}
.send,
.ht-lb1,
.ht-lb2,
.history,
.label11,
.label12,
.label13,
.label21,
.label22,
.label31,
.label32,
.label33,
.icon,
.character {
  background-size: 100% 100%;
}
</style>
